<template>
  <div class="container">
    <a-form-model :model="form" ref="form" v-bind="layout" :rules="rules" >
      <a-form-model-item label="名称" prop="name">
        <a-input v-model="form.name" placeholder="名称" />
      </a-form-model-item>
      <a-form-model-item label="文号" prop="code">
        <a-input v-model="form.code" placeholder="文号" />
      </a-form-model-item>
       <a-form-model-item label="类型" prop="type">
        <a-select v-model="form.type"  placeholder="类型" >
          <a-select-option :value="1">
           奖励
          </a-select-option>
          <a-select-option :value="2">
           处分
          </a-select-option>
        </a-select>
      </a-form-model-item>


       <a-form-model-item  v-if="form.type==1" label="奖励级别" prop="rewardGrade">
        <a-select v-model="form.rewardGrade"  placeholder="奖励级别" >
          <a-select-option :value="1">
           中央广播电视总台
          </a-select-option>
          <a-select-option :value="2">
           广电总局
          </a-select-option>
           <a-select-option :value="3">
           中直机关
          </a-select-option>
           <a-select-option :value="4">
           全国
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item  v-if="form.type==1" label="奖励类型" prop="rewardType">
        <a-select v-model="form.rewardType"  placeholder="奖励类型" >
          <a-select-option :value="1">
           优秀共青团员
          </a-select-option>
          <a-select-option :value="2">
           优秀团员领导干部
          </a-select-option>
           <a-select-option :value="3">
           优秀团务工作者
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item  v-if="form.type==2" label="处分级别" prop="punishmentGrade">
        <a-select v-model="form.punishmentGrade"  placeholder="处分级别" >
          <a-select-option :value="1">
           警告
          </a-select-option>
          <a-select-option :value="2">
           严重警告
          </a-select-option>
           <a-select-option :value="3">
           撤销团内职务
          </a-select-option>
           <a-select-option :value="4">
           留团察看
          </a-select-option>
          <a-select-option :value="5">
           开除团籍
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="团员" prop="memberId">
        <a-select v-model="form.memberId"  placeholder="类型" >
          <a-select-option v-for="(item,index) in listData" :key="index" :value="item.id">
           {{item.name}}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="发生时间" prop="happenTime">
        <a-date-picker style="width:100%" v-model="form.happenTime" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" placeholder="发生时间" />
      </a-form-model-item>

       <a-form-model-item label="说明" prop="note">
        <a-input  v-model="form.note" placeholder="说明" />
      </a-form-model-item>
      <!-- <a-form-model-item label="组织" prop="orgId">
        <a-select v-model="form.orgId"  placeholder="团员所属组织机构" >
        </a-select>
      </a-form-model-item> -->

      <!-- <a-form-model-item>
      </a-form-model-item> -->
    </a-form-model>
  </div>
</template>

<script>
export default {
  props: {
    form: {
      type: Object,
      default: () => {
        return {}
      },
    }
  },
  data() {
    return {
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 },
      },
      rules: {
        name: [{required: true, message: '请输入名称', trigger: 'blur'}],
        code: [{required: true, message: '请输入文号', trigger: 'blur'}],
        type: [{required: true, message: '请输入类型', trigger: 'change'}],
        rewardGrade: [{required: true, message: '请输入奖励级别', trigger: 'change'}],
        rewardType: [{required: true, message: '请输入奖励类型', trigger: 'change'}],
        punishmentGrade: [{required: true, message: '请输入处分级别', trigger: 'change'}],
        memberId: [{required: true, message: '请输入团员', trigger: 'change'}],
        happenTime: [{required: true, message: '请输入发生时间', trigger: 'blur'}],
      },
      listData:[],
    }
  },
  mounted() {
    // if (this.$route.query.id) {
    //   this.form = this.$route.query 
    // }
    this.getList()
  },
  methods: {
    getList(){
     this.$ajax({
        url: this.$api.member.findList,
        data: {status: "2"},
        success: (result) => {
          this.listData = result
        },
        fail: (err) => {
          this.$message.success(err);
        }
      });
    },
    save() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$ajax({
            url: this.$api.rewardPunishment.saveOrUpdate,
            data: this.form,
            success: (result) => {
              this.$message.success("操作成功");
              this.$emit('pass', null);
              // this.$router.push(`/member/list`);
            },
            fail: (err) => {
              this.$message.success(err);
              this.$emit('reject', null);
            }
          });
        } else {
          this.$emit('reject', null);
        }
      });
    },
  }
}
</script>

<style lang="less" scoped>
.container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
    padding: 8px 108px!important;
  .header{
    height: 56px;
    flex-grow: 0;
    display: flex;
    align-items: center;
    font-size: 1.8rem;
    padding-left: 2.4rem;
  }
  .content{
    height: auto;
    padding: 3.2rem 13.2rem;
    border-top: .1rem solid rgba(0, 0, 0, 0.1);;
    border-bottom: .1rem solid rgba(0, 0, 0, 0.1);;
  }
  .footer{
    height: 64px;
    flex-grow: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 2.4rem;
    .ant-btn {
      margin-left: 1.6rem;
    }
  }
}
.ant-form-item-with-help {
    margin-bottom: 24px !important;
}
</style>
